<template>
  <div>
    <h1>用户管理</h1>
    <router-link to="/user/add" style="float: left">添加用户信息</router-link>
    <router-link to="/user/updata" style="float: left">修改用户信息</router-link>
    <table border="1" width="100%">
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>工资</th>
        <th>个人简介</th>
        <th>操作</th>
      </tr>
      <tr v-for="(user,index) in users" :key="user.id">
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.age}}</td>
        <td>{{user.salary}}</td>
        <td>{{user.des}}</td>
        <td> <a href="">删除</a> <a href="" @click.prevent="userEditDetail(user.id)">修改</a></td>
      </tr>
    </table>

    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      users: [],
    }
  },
  methods: {},
  computed: {},
  created() { //初始化阶段发送请求查询所有用户信息
    this.$http.get("http://localhost:8990/users").then(res => {
      this.users = res.data;
    });
  },
  beforeRouteUpdate(to,from,next){
    alert("哈哈哈")
    next()
    this.$http.get("http://localhost:8990/users").then(res => {
      this.users = res.data;
    });
  }
}
</script>

<style scoped>
th {
  background-color: beige;
}
</style>
